<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/style.css">
    <title>购物车</title>
</head>

<body>
    <!-- 购物列表有数据默认列出 -->
    <div id="app" v-cloak>
        <template v-if="list.length!== 0">
            <table>
                <thead>
                    <tr>
                        <th colspan="6">
                            <h1>
                                <center>
                                    购物小车车
                                </center>
                            </h1>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            <input type="checkbox" name="selectAllChe" @click="IfSelectAll()" id="" v-model="selectAll">
                        </th>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td>
                            <!-- 通过 v-bind: 可以动态地给属性绑定属性值 -->
                            <input type="checkbox" name="selectChe" :value="item.name" id="" v-model="selectChe">
                        </td>
                        <td> {{ index + 1 }} </td>
                        <td> {{ item.name }} </td>
                        <td> {{ item.price}} </td>
                        <td>
                            <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
                            {{ item.count }}
                            <button @click="handleAdd(index)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>总价￥: {{ totalPrice }} </div>
        </template>
        <!-- 如果购物车为空 -->
        <div v-else>

            <table>
                <thead>
                    <tr>
                        <th colspan="5">
                            <center>
                                <h1>
                                    购物车为空
                                </h1>
                            </center>
                        </th>
                    </tr>
                    <tr>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> 1 </td>
                        <td> <input type="text" id="name" placeholder="请输入商品名称"> </td>
                        <td> <input type="text" id="price" placeholder="请输入商品单价"> </td>
                        <td>
                            <button @click="countReduce()">-</button>
                            <!-- {{ item.count }} -->
                            <label for="">
                                {{ count }}
                            </label>
                            <button @click="countAdd()">+</button>
                        </td>
                        <td>
                            <button @click="addList()">添加</button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
    <script src="./static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./static/js/index.js"></script>

</body>

</html>